<template>
  <div class="lottery">
    <x-header>积分抽奖</x-header>
    <div class="chou-jiang">
      <span class="choujiang-num">可用积分：<span>{{num}}</span> 积分</span>
      <div id="rotary-table">
        <div class="award" v-for="(award,index) in awards" :key="index" :class="['award'+index,{'active': index==current}]">
          <i :style="{color:award.color}" class="award-icon" :class="award.icon"></i>
          <span>{{award.name}}</span>
        </div>
        <div id="start-btn" @click="start">
          <i class="icon-kaishi"></i>
          <span>立即抽奖</span>
        </div>
      </div>
      <div class="tips">
        <p>活动规则：</p>
        <p>1.当用户当前积分数满100，方参与可积分抽奖</p>
        <p>2.抽奖一次需耗费100积分，当用户积分数少于100时，不可参与抽奖</p>
      </div>
    </div>
    <alert v-model="show" title="恭喜">{{msg}}</alert>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import Avatar from 'vue-avatar';
import {
  Alert,
  XHeader
} from 'vux';
const MyStore = namespace('mine');

@Component({
  components: {
    Alert,
    XHeader,
    Avatar
  }
})
export default class Lottery extends Vue {
  @MyStore.Action lottery
  @MyStore.Action initlotteryNum
  @MyStore.State lotteryData
  @MyStore.State lotteryNum
  show = false
  msg = ''
  num = 0
  current = null
  myAwards = {}
  awards = [
    { id: 1, name: '150积分', icon: 'icon-jifen1', color: '#ffc14f' },
    { id: 2, name: '1元代金券', icon: 'icon-daijinjuanguanli', color: '#ff6666' },
    { id: 3, name: '谢谢参与', icon: 'icon-zhuanpantubiao_xiexiecanyu', color: '#44c1ff' },
    { id: 4, name: '10元代金券', icon: 'icon-daijinjuanguanli', color: '#ff6666' },
    { id: 7, name: '50积分', icon: 'icon-jifen1', color: '#ffc14f' },
    { id: 6, name: '3元代金券', icon: 'icon-daijinjuanguanli', color: '#ff6666' },
    { id: 5, name: '谢谢参与', icon: 'icon-zhuanpantubiao_xiexiecanyu', color: '#44c1ff' },
    { id: 8, name: '5元代金券', icon: 'icon-daijinjuanguanli', color: '#ff6666' }
  ]
  speed = 200
  diff = 15
  award = {}
  time = 0
  created () {
    this.getLotteryNum()
  }
  getLotteryNum () {
    this.initlotteryNum({}).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.num = this.lotteryNum
      }
    })
  }
  start () {
    if (this.num < 100) {
      this.$vux.toast.text('您的积分不足', 'middle')
    } else {
      this.initLottery()
    }
  }
  initLottery () {
    this.myAwards = {}
    this.lottery({}).then(msg => {
      let msg1 = false;
      if (msg1) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const msg = this.lotteryData
        if (msg === '150积分') {
          this.myAwards = { id: 1, name: '150积分' }
        }
        if (msg === '1元代金券') {
          this.myAwards = { id: 2, name: '1元代金券' }
        }
        if (msg === '谢谢参与') {
          this.myAwards = { id: 3, name: '谢谢参与' }
        }
        if (msg === '10元代金券') {
          this.myAwards = { id: 4, name: '10元代金券' }
        }
        if (msg === '谢谢参与') {
          this.myAwards = { id: 5, name: '谢谢参与' }
        }
        if (msg === '50积分') {
          this.myAwards = { id: 7, name: '50积分' }
        }
        if (msg === '3元代金券') {
          this.myAwards = { id: 6, name: '3元代金券' }
        }
        if (msg === '5元代金券') {
          this.myAwards = { id: 8, name: '5元代金券' }
        }
        if (this.myAwards.id) {
          this.drawAward();
          this.time = Date.now();
          this.speed = 200;
          this.diff = 15;
        }
      }
    })
  }
  drawAward () {
    setTimeout(() => {
      this.award = this.myAwards
    }, 1000);
    this.move();
  }
  move () {
    window.timeout = setTimeout(() => {
      this.current++;
      if (this.current > 7) {
        this.current = 0;
      }
      if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
        this.speed += this.diff;
        if (
          (Date.now() - this.time) / 1000 > 4 &&
          this.award.id === this.awards[this.current].id
        ) {
          clearTimeout(window.timeout);
          setTimeout(() => {
            if (this.award.id === 3 || this.award.id === 5) {
              this.$vux.toast.text('谢谢参与，请再接再厉', 'middle')
            } else {
              this.$vux.toast.text(`恭喜你，抽中了${this.award.name}`, 'middle')
            }
            this.getLotteryNum()
          }, 0);
          return;
        }
      } else {
        this.speed -= this.diff;
      }
      this.move();
    }, this.speed);
  }
}
</script>
<style lang="less">
.lottery {
  padding-top: 46px;
  .icon-kaishi {
    color: #a6d87e;
  }
  .award-icon {
    font-size: 42px;
    height: 42px;
    line-height: 42px;
  }
  .chou-jiang {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:url('../../../static/choujiang.jpg') no-repeat;
  background-size:100% 100%;
  .choujiang-num {
    position: absolute;
    right: 5px;
    top: 95px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    span {
      color: yellowgreen;
    }
  }
  .tips {
    font-size: 12px;
    color: #ffffff;
    line-height: 20px;
    padding: 0 10px;
  }
}
#rotary-table {
  margin-top: 0.5rem;
  width: 340px;
  height: 349px;
  position: relative;
  font-size: 12px;
  .award {
    padding: 10px 0;
    box-sizing: border-box;
    border-radius: 10px;
    width: 90px;
    height: 96px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    float: left;
    position: absolute;
    overflow: hidden;
    font-size: 14px;
    color: #666666;
    background-color: #ffffff;
    &.active {
      background-color: rgb(230, 170, 21);
      color: #ffffff;
    }
    &.award0 {
      top: 21px;
      left: 21px;
    }
    &.award1 {
      top: 21px;
      left: 125px;
    }
    &.award2 {
      top: 21px;
      right: 22px;
    }
    &.award3 {
      top: 126px;
      right: 22px;
    }
    &.award4 {
      bottom: 22.5px;
      right: 22px;
    }
    &.award5 {
      bottom: 22.5px;
      right: 125.5px;
    }
    &.award6 {
      bottom: 22.5px;
      left: 21px;
    }
    &.award7 {
      top: 126px;
      left: 21px;
    }
  }
  #start-btn {
    padding: 10px 0;
    box-sizing: border-box;
    border-radius: 10px;
    position: absolute;
    top: 125px;
    left: 124px;
    width: 90px;
    height: 96px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    background-color: #ffffff;
    font-size: 14px;
    color: #666666;
    i {
      font-size: 42px;
      height: 42px;
      line-height: 42px;
    }
  }
}
}
</style>
